<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table width="600" border="1" cellspacing="0">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>职位</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbMain"></tbody>
    </table>
    <script type="text/javascript">
        //模拟一段JSON数据，实际要从数据库中读取 
        var per = [{
            id: 001,
            name: '张珊',
            job: '学生'
        }, {
            id: 002,
            name: '李斯',
            job: '教师'
        }, {
            id: 003,
            name: '王武',
            job: '经理'
        }];
        window.onload = function() {
            var tbody = document.getElementById('tbMain');
            for (var i = 0; i < per.length; i++) { //遍历一下json数据 
                debugger
                var trow = getDataRow(per[i]); //定义一个方法,返回tr数据 
                tbody.appendChild(trow);
            }
        }

        function getDataRow(h) {
            var row = document.createElement('tr'); //创建行 
            var idCell = document.createElement('td'); //创建第一列id 
            idCell.innerHTML = h.id; //填充数据 
            row.appendChild(idCell); //加入行 ，下面类似 
            var nameCell = document.createElement('td'); //创建第二列name 
            nameCell.innerHTML = h.name;
            row.appendChild(nameCell);
            var jobCell = document.createElement('td'); //创建第三列job 
            jobCell.innerHTML = h.job;
            row.appendChild(jobCell);
            //到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮 
            var delCell = document.createElement('td'); //创建第四列，操作列 
            row.appendChild(delCell);
            var btnDel = document.createElement('input'); //创建一个input控件 
            btnDel.setAttribute('type', 'button'); //type="button" 
            btnDel.setAttribute('value', '删除');
            //删除操作 
            btnDel.onclick = function() {
                if (confirm("确定删除这一行嘛？")) {
                    //找到按钮所在行的节点，然后删掉这一行 
                    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                    //btnDel - td - tr - tbody - 删除(tr) 
                    //刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除 
                }
            }
            delCell.appendChild(btnDel); //把删除按钮加入td，别忘了 
            return row; //返回tr数据   
        }
    </script>
</body>

</html>